<template>
  <div class="reg">
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <h2>用户注册</h2>
      <el-form-item label="用户名" prop="userAccount">
        <el-input
          v-model="ruleForm.userAccount"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="userPassword">
        <el-input
          type="password"
          v-model="ruleForm.userPassword"
          autocomplete="off"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>

      <el-form-item label="确认密码" prop="checkPass">
        <el-input
          type="password"
          v-model="ruleForm.checkPass"
          autocomplete="off"
          placeholder="请再次确认密码"
        ></el-input>
      </el-form-item>

      <el-form-item label="电话号码" prop="userTel">
        <el-input
          v-model.number="ruleForm.userTel"
          placeholder="请输入电话号码"
        ></el-input>
      </el-form-item>

      <el-form-item label="邮箱" prop="userEmail">
        <el-input
          placeholder="请输入邮箱"
          v-model="ruleForm.userEmail"
        ></el-input>
      </el-form-item>

      <el-form-item label="真实姓名" prop="userName">
        <el-input
          v-model="ruleForm.userName"
          placeholder="请输入真实姓名"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          @click="submitForm('ruleForm')"
          style="width: 80px"
          >注册</el-button
        >
        <el-button @click="resetForm('ruleForm')" style="width: 80px"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <Modal v-show="isLoading"
      ><Center><Loading v-show="isLoading"/></Center
    ></Modal>
  </div>
</template>

<script>
import { addUser } from "@/services/User.js";
import Loading from "@/components/Loading.vue";
import Modal from "@/components/Modal.vue";
import Center from "@/components/Center.vue";
export default {
  components: { Loading, Modal, Center },
  data() {
    //   用户名
    var validateUserName = (rule, value, callback) => {
      var reg = /[a-zA-Z\u4E00-\u9FA5]+$/;
      if (value === "") {
        callback(new Error("请输入用户名!"));
      } else if (!reg.test(value)) {
        callback(new Error("用户名只能输入中文或英文!"));
      } else {
        callback();
      }
    };
    // 密码
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码!"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    // 二次密码
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码!"));
      } else if (value !== this.ruleForm.userPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    // 电话号码
    var checkTel = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("电话号码不能为空!"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值!"));
        } else {
          if (value.toString().length != 11) {
            callback(new Error("电话号码有效位为11位!"));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    // 邮箱
    var validateEmail = (rule, value, callback) => {
      var reg = /^\w+@[a-z0-9]+\.[a-zA-Z]{3}$/;
      if (value === "") {
        callback(new Error("请输入邮箱!"));
      } else if (!reg.test(value)) {
        callback(new Error("请输入邮箱的正确格式:xxx@xx.com"));
      } else {
        callback();
      }
    }; //   真实姓名
    var validateRealName = (rule, value, callback) => {
      var reg = /[a-zA-Z\u4E00-\u9FA5]+$/;
      if (value === "") {
        callback(new Error("请输入真实姓名!"));
      } else if (!reg.test(value)) {
        callback(new Error("真实姓名只能输入中文或英文!"));
      } else {
        callback();
      }
    };
    return {
      isLoading:false,
      ruleForm: {
        userAccount: "",
        userPassword: "",
        checkPass: "",
        userTel: "",
        userEmail: "",
        userName: "",
      },
      rules: {
        userAccount: [
          { required: true, validator: validateUserName, trigger: "blur" },
          { min: 3, max: 6, message: "长度在 3 到 6 个字符!", trigger: "blur" },
        ],
        userPassword: [
          {
            required: true,
            validator: validatePass,
            message: "密码不能为空！",
            trigger: "blur",
          },
          { min: 4, max: 9, message: "长度在 4 到 9 个字符!", trigger: "blur" },
        ],
        checkPass: [
          {
            required: true,
            validator: validatePass2,
            trigger: "blur",
          },
        ],
        userTel: [{ required: true, validator: checkTel, trigger: "blur" }],
        userEmail: [
          { required: true, validator: validateEmail, trigger: "blur" },
        ],
        userName: [
          { required: true, validator: validateRealName, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
         this.isLoading = true;
        if (valid) {
          addUser(this.ruleForm).then((resp) => {
            this.$message.success("注册成功");
            this.$router.push({ name: "Login" });
          });
        } else {
          console.log("error submit!!");
          return false;
        }
         
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.reg {
  width: 100%;
  height: 100%;
  background: url(../assets/zc.png) no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  .el-form {
    padding: 15px 70px 0 70px;
    background: #fff;
    background-color: rgba(211, 208, 208, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
    h2 {
      font-size: 20px;
      margin-bottom: 35px;
    }
    .el-input {
      width: 200px;
    }
    label {
      width: 50px;
      display: inline-block;
      text-align: justify;
      text-align-last: justify;
    }
    .el-form-item {
      width: 100%;
      text-align: right;
    }
    .el-button {
      width: 70px;
    }
  }
}
</style>
